<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row style="margin-bottom:10px;">
        <el-button @click="getAllList">全部课程</el-button>
        <el-button @click="getUnAuditList">已提交待审核</el-button>
      </el-row>
      <el-card shadow="never">
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="加载中"
          fit
          highlight-current-row
          style="width:100%;"
          border
          @selection-change="handleSelectionChange"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column align="center" label="课程名称">
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus=='202005'">
                <a
                  target="_blank"
                  v-bind:href="courseServer + scope.row.courseBaseId + '.html'"
                >{{scope.row.name}}</a>
              </span>
              <span v-else>{{scope.row.name}}</span>
              <br />
              <!---<span style="font-size: 12px;color: #909399;">
                <a href="#" target="_blank">{{scope.row.mtName}}</a>
                >
                <a href="#" target="_blank">{{scope.row.stName}}</a>
              </span> -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus=='202001'">审核未通过</span>
              <span v-else-if="scope.row.auditStatus=='202002'">未审核</span>
              <span v-else-if="scope.row.auditStatus=='202003'">已提交</span>
              <span v-else-if="scope.row.auditStatus=='202004'">审核通过</span>
              <span v-else-if="scope.row.auditStatus=='202006'">课程已下线</span>
              <span v-else>课程已发布</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建机构/人">
            <template slot-scope="scope">
              <span>{{scope.row.companyName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.createDate | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="200"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-link
                v-if="scope.row.auditStatus == '202001'"
                type="primary"
                disabled
                :underline="false"
              >审核</el-link>
              <el-link
                v-if="scope.row.auditStatus == '202002'"
                type="primary"
                disabled
                :underline="false"
                @click="handleChange(scope.row.courseBaseId)"
              >审核</el-link>
              <el-link
                v-if="scope.row.auditStatus == '202003'"
                type="primary"
                :underline="false"
                @click="handleChange(scope.row.courseBaseId)"
              >审核</el-link>
              <el-link
                v-if="scope.row.auditStatus == '202004'"
                type="primary"
                disabled
                :underline="false"
              >审核</el-link>
              <el-link
                v-if="scope.row.auditStatus == '202006'"
                type="primary"
                disabled
                :underline="false"
              >审核</el-link>&nbsp;&nbsp;
              <el-link
                v-if="scope.row.auditStatus == '202005'"
                type="danger"
                :underline="false"
                @click="handleStatus(scope.row.courseBaseId)"
              >封禁</el-link>
              <el-link
                type="primary"
                :underline="false"
                @click="handlePreView(scope.row.courseBaseId)"
              >课程预览</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages" style="float: right;margin-bottom: 20px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.pageNo)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pageSize)"
              :page-sizes="[10,20,30,50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <coureseDialog
          ref="auditCourse"
          :titleInfo="titleInfo"
          :formBase="formData"
          @audit="getList"
        ></coureseDialog>
        <forbiddenDialog
          ref="forbiddenCourse"
          :titleInfo="titleInfo"
          :formBase="formData"
          @forbidden="getList"
        ></forbiddenDialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { list, forbidden, remove } from '@/api/xczx/courses'
import coureseDialog from './../components/course-audit'
import forbiddenDialog from './../components/course-forbidden'
import { courseServer } from '@/utils/course'
var _this = null
export default {
  name: 'Courses',
  components: {
    coureseDialog,
    forbiddenDialog
  },
  data() {
    return {
      courseServer: '',
      multipleSelection: [],
      delarr: [],
      newarr: {},
      audiStatus: '已提交',
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      requestParameters: {
        pageNo: 1,
        pageSize: 10
      },
      requestBody: {},
      companyId: '',
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        isFamous: '',
        shortName: '',
        company: '',
        tags: '',
        remarks: ''
      }
    }
  },
  computed: {
    status() {
      return status
    }
  },
  methods: {
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选删除
    delArray() {
      var _this = this
      const length = this.multipleSelection.length
      if (length == 0) {
        this.$message({
          message: '选择要删除的课程！',
          center: true
        })
        return
      }
      this.$confirm('确定要删除选中的内容吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          this.change()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async change() {
      for (let i = 0; i < length; i++) {
        this.delarr.push(this.multipleSelection[i].courseBaseId)
      }
      this.newarr.ids = this.delarr
      let data = this.newarr
      await remove(data).then(() => {
        this.getList()
      })
    },
    // 待审核课程--待删除掉
    async getList1() {
      // this.requestBody.auditStatus = '202002'
      const { data: res } = await list(this.requestParameters, this.requestBody)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      // this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    getAllList() {
      this.requestBody.auditStatus = ''
      this.requestParameters.pageNo = 1
      this.getList()
    },
    getUnAuditList() {
      this.requestBody.auditStatus = '202003'
      this.requestParameters.pageNo = 1
      this.getList()
    },
    // 获取列表数据
    async getList() {
      if (this.companyId) {
        this.requestBody.companyId = this.companyId
      }
      // this.requestBody.auditStatus = ''
      const { data: res } = await list(this.requestParameters, this.requestBody)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.listLoading = false
    },
    // 重置
    resetForm() {
      this.$refs['requestParameters'].resetFields()
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.pageNo = 1
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pageSize = val
      if (this.requestParameters.pageNo === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.pageNo = val
      this.getList()
    },

    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query() {
      this.formData = {}
    },
    // 课程审核
    handleChange(courseBaseId) {
      this.query()
      this.$refs.auditCourse.dialogFormV()
      this.titleInfo.text = '课程审核'
      this.hanldeEditForm(courseBaseId)
    },
    // 窗口操作**********************************
    // 课程审核
    async hanldeEditForm(courseBaseId) {
      this.formData.courseBaseId = courseBaseId
    },
    // 课程封禁
    handleStatus(courseBaseId) {
      this.query()
      this.$refs.forbiddenCourse.dialogFormV()
      this.titleInfo.text = '课程封禁'
      this.hanldeEditForm1(courseBaseId)
    },
    // 课程封禁
    async hanldeEditForm1(courseBaseId) {
      this.formData.courseBaseId = courseBaseId
    },
    async handlePreView(courseBaseId) {
      if (courseBaseId) {
        window.open(
          `${process.env.VUE_APP_SERVER_API_URL}/content/course/preview/${courseBaseId}`,
          '_blank'
        )
      }
    }
  },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created() {
    var _this = this
    this.companyId = this.$route.query.companyId
    this.courseServer = courseServer()
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function() {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #ffffff;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.el-dropdown-menu--medium .el-dropdown-menu__item {
  width: 125px;
}
</style>
